<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周计划详细信息</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js" type="text/javascript"></script>
    <script type="text/javascript" src="yeqian/js/jquery.min.js"></script>
    <script type="text/javascript" src="yeqian/js/swiper-3.4.0.jquery.min.js"></script>
    <link type="text/css" href="yeqian/css/swiper-3.2.7.min.css" rel="stylesheet"/>
</head>
<style>


    body {
        min-width: 320px;
        max-width: 99%;
        margin: 0 auto;
        color: #333;
        padding: 0;
        font-family: "Microsoft Yahei";
        text-align: center;
    }

    .container {
        /*width: 100%;*/
        border: 1px solid #ccc;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .swiper1 {
        width: 100%;
    }

    .swiper1 .selected {
        color: #ec5566;
        border-bottom: 2px solid #ec5566;
    }

    .swiper1 .swiper-slide {
        text-align: center;
        font-size: 16px;
        height: 50px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        cursor: pointer;
    }

    .swiper2 {
        width: 100%;
    }

    .swiper2 .swiper-slide {
        height: calc(100vh - 50px);
        text-align: center;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }


    body {
        padding: 10px 20px 10px 10px;
    }

    .title_font {
        font-weight: bold;
        color: #000;
    }


</style>
<body>


<table class="layui-table" lay-even="" lay-skin="nob">

    <tbody>
    <tr>
        <td class="title_font">计划名称</td>
        <td id="weekName"></td>
        <td class="title_font">开始时间</td>
        <td id="planDate"></td>
        <td class="title_font">结束时间</td>
        <td id="planDate1"></td>
    </tr>
    <tr>
        <td class="title_font">教练员姓名</td>
        <td id="coachName"></td>
        <td class="title_font">其他教练员</td>
        <td id="otherCoach"></td>
        <td class="title_font">运动员姓名</td>
        <td id="athleteName"></td>
    </tr>


    </tbody>
</table>
<label class="layui-form-label">周训练任务</label>
<div class="layui-input-block">
    <textarea placeholder="请输入内容" id="weekMission" style="margin-bottom: 10px" class="layui-textarea"
              disabled=""></textarea>
</div>
<label class="layui-form-label">周训练重点</label>
<div class="layui-input-block">
    <textarea placeholder="请输入内容" id="weekEmphasis" style="margin-bottom: 10px" class="layui-textarea"
              disabled=""></textarea>
</div>
<label class="layui-form-label">计划描述</label>
<div class="layui-input-block">
    <textarea placeholder="请输入内容" id="planDescribe" style="margin-bottom: 10px" class="layui-textarea"
              disabled=""></textarea>
</div>
<label class="layui-form-label">准备部分</label>
<div class="layui-input-block">
    <textarea placeholder="请输入内容" id="exp1" class="layui-textarea" disabled=""></textarea>
</div>

<div id="item" class="container">
    <div class="swiper-container swiper1">
        <div id="swiperHead" class="swiper-wrapper">
            <!--<a class="swiper-slide selected">推荐</a>
            <a class="swiper-slide">菜单 2</a>
            <a class="swiper-slide">菜单 3</a>-->
        </div>
    </div>
    <!-- swiper2 -->
    <div class="swiper-container swiper2" style="height: 220px;">
        <div id="swiperBody" class="swiper-wrapper">
            <!--<div class="swiper-slide swiper-no-swiping"></div>
            <div class="swiper-slide swiper-no-swiping">内容bvcccccccccccbvb</div>
            <div class="swiper-slide swiper-no-swiping">内容sdasdssssss</div>-->
        </div>
    </div>
</div>
</div>
<label class="layui-form-label">结束部分</label>
<div class="layui-input-block">
    <textarea placeholder="请输入内容" id="exp2" class="layui-textarea" disabled=""></textarea>
</div>
<div id="btn"></div>
</body>
<script type="text/javascript">
    $.ajaxSetup({
        async: false
    });

    function swiperBody(curId) {

        var url = "../../atsCurriculumController/findById";
        var data = {curriculumId: curId}
        $.post(url, data, function (obj) {
            $("#swiperBody").append('<div class="swiper-slide swiper-no-swiping">' +
                '<table class="layui-table" lay-even="" lay-skin="nob">' +
                '<tbody>' +
                '<tr>' +
                '<td class="title_font">计划名称</td>' +
                '<td>' + obj.data.curriculumName + '</td>' +
                '<td class="title_font">运动项目名称</td>' +
                '<td>' + obj.data.itemName + '</td>' +
                '<td class="title_font">教练员姓名</td>' +
                '<td>' + obj.data.coachName + '</td>' +
                '</tr>' +
                '<tr>' +

                '<td class="title_font">制定时间</td>' +
                '<td>' + obj.data.planDate + '</td>' +
                '<td class="title_font">应到人数</td>' +
                '<td>' + obj.data.weekShould + '</td>' +
                '<td class="title_font">实到人数</td>' +
                '<td>' + obj.data.weekReality + '</td>' +
                '</tr>' +
                '<tr>' +
                '<td class="title_font">运动负荷</td>' +
                '<td>' + obj.data.weekLoad + '</td>' +
                '<td class="title_font">运动强度</td>' +
                '<td>' + obj.data.curIntensity + '</td>' +
                '<td class="title_font">运动量</td>' +
                '<td>' + obj.data.curScale + '</td>' +
                '</tr>' +
                '<tr>' +
                '<td class="title_font">训练课任务</td>' +
                '<td colspan="5">' + obj.data.weekTask + '</td>' +
                '</tr>' +
                '</tbody></table>' +
                '</div>');

        });


    }


    $(function () {

        var id = getQueryString("weekId");
        var url = "../../atsWeekController/findById";
        var data = {weekId: id}
        $.post(url, data, function (obj) {

            //赋值
            $("#weekName").text(obj.data.weekName);
            $("#planDate").text(obj.data.planDate);
            $("#planDate1").text(obj.data.planDate1);
            $("#coachName").text(obj.data.coachName);
            $("#otherCoach").text(obj.data.otherCoach);
            $("#weekMission").text(obj.data.weekMission);
            $("#weekEmphasis").text(obj.data.weekEmphasis);
            $("#planDescribe").text(obj.data.planDescribe);
            $("#exp1").text(obj.data.exp1);//基本部分
            $("#exp2").text(obj.data.exp2);//结束部分

            //运动员
            $.each(obj.athleteName, function (index, item) {
                $("#athleteName").append(item.athleteName + ",")
            });
            var yq = '';


            var cs = '';
            $.each(obj.cur, function (index, item) {
                curIdx = item.curriculumId;
                if (index == 0) {
                    cs += '<a id="head' + item.curriculumId + '" class="swiper-slide selected">' + item.curriculumName + '</a>';
                    swiperBody(item.curriculumId);
                } else {
                    cs += '<a id="head' + item.curriculumId + '" class="swiper-slide">' + item.curriculumName + '</a>';
                    swiperBody(item.curriculumId)
                }


            });
            $("#swiperHead").append(cs);


            //附件
            var i = 0;
            var fujian = '<div style="margin-bottom: 10px">';
            if (obj.data.file1 != "" && obj.data.file1 != null) {
                i++;
                fujian += '<a href="../../' + obj.data.file1 + '" class="layui-btn layui-btn-primary">附件' + i + '</a>';
            }
            if (obj.data.file2 != "" && obj.data.file2 != null) {
                i++;
                fujian += '<a href="../../' + obj.data.file2 + '" class="layui-btn layui-btn-primary">附件' + i + '</a>';
            }
            if (obj.data.file3 != "" && obj.data.file3 != null) {
                i++;
                fujian += '<a href="../../' + obj.data.file3 + '" class="layui-btn layui-btn-primary">附件' + i + '</a>';
            }
            $("#btn").append(fujian);


        }, "json");

        //以下都是页签的代码
        function setCurrentSlide(ele, index) {
            $(".swiper1 .swiper-slide").removeClass("selected");
            ele.addClass("selected");
            //swiper1.initialSlide=index;
        }

        var swiper1 = new Swiper('.swiper1', {
//					设置slider容器能够同时显示的slides数量(carousel模式)。
//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
            slidesPerView: 5.5,
            paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            spaceBetween: 10,//slide之间的距离（单位px）。
            freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
            loop: false,//是否可循环
            onTab: function (swiper) {
                var n = swiper1.clickedIndex;
            }
        });
        swiper1.slides.each(function (index, val) {
            var ele = $(this);
            ele.on("click", function () {
                setCurrentSlide(ele, index);
                swiper2.slideTo(index, 500, false);
                //mySwiper.initialSlide=index;
            });
        });

        var swiper2 = new Swiper('.swiper2', {
            //freeModeSticky  设置为true 滑动会自动贴合
            direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
            loop: false,
            //effect : 'fade',//淡入
            //effect : 'cube',//方块
            //effect : 'coverflow',//3D流
            //effect : 'flip',//3D翻转
            autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
            onSlideChangeEnd: function (swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
                var n = swiper.activeIndex;
                setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                swiper1.slideTo(n, 500, false);
            }
        });

    });
</script>

</html>